export default {
    name: "MjDescriptionsRow",
    props: {
        row: {
            type: Array,
        },
    },
    inject: ["mjDescriptions"],
    render(h) {
        const { mjDescriptions } = this;
        const row = (this.row || []).map((item) => {
            return {
                ...item,
                label: item.slots.label || item.props.label,
                ...[
                    "labelClassName",
                    "contentClassName",
                    "labelStyle",
                    "contentStyle",
                ].reduce((res, key) => {
                    res[key] = item.props[key] || mjDescriptions[key];
                    return res;
                }, {}),
            };
        });
        if (mjDescriptions.direction === "vertical") {
            return (
                <tbody>
                    <tr class="mj-descriptions-row">
                        {row.map((item) => {
                            return (
                                <th
                                    class={{
                                        "mj-descriptions-item__cell": true,
                                        "mj-descriptions-item__label": true,
                                        "has-colon": mjDescriptions.border ? false : mjDescriptions.colon,
                                        "is-bordered-label": mjDescriptions.border, [item.labelClassName]: true,
                                    }}
                                    style={item.labelStyle}
                                    colSpan={item.props.span}
                                >
                                    {item.label}
                                </th>
                            );
                        })}
                    </tr>
                    <tr class="mj-descriptions-row">
                        {row.map((item) => {
                            return (
                                <td
                                    class={[
                                        "mj-descriptions-item__cell",
                                        "mj-descriptions-item__content",
                                        item.contentClassName,
                                    ]}
                                    style={item.contentStyle}
                                    colSpan={item.props.span}
                                >
                                    {item.slots.default}
                                </td>
                            );
                        })}
                    </tr>
                </tbody>
            );
        }
        if (mjDescriptions.border) {
            return (
                <tbody>
                    <tr class="mj-descriptions-row">
                        {row.map((item) => {
                            return [
                                <th
                                    class={{
                                        "mj-descriptions-item__cell": true,
                                        "mj-descriptions-item__label": true,
                                        "is-bordered-label": mjDescriptions.border, [item.labelClassName]: true,
                                    }}
                                    style={item.labelStyle}
                                    colSpan="1"
                                >
                                    {item.label}
                                </th>,
                                <td
                                    class={[
                                        "mj-descriptions-item__cell",
                                        "mj-descriptions-item__content",
                                        item.contentClassName,
                                    ]}
                                    style={item.contentStyle}
                                    colSpan={item.props.span * 2 - 1}
                                >
                                    {item.slots.default}
                                </td>,
                            ];
                        })}
                    </tr>
                </tbody>
            );
        }
        return (
            <tbody>
                <tr class="mj-descriptions-row">
                    {row.map((item) => {
                        return (
                            <td
                                class="mj-descriptions-item mj-descriptions-item__cell"
                                colSpan={item.props.span}
                            >
                                <div class="mj-descriptions-item__container">
                                    <span
                                        class={{
                                            "mj-descriptions-item__label": true,
                                            "has-colon": mjDescriptions.colon,
                                            [item.labelClassName]: true,
                                        }}
                                        style={item.labelStyle}
                                    >
                                        {item.label}
                                    </span>
                                    <span
                                        class={[
                                            "mj-descriptions-item__content",
                                            item.contentClassName,
                                        ]}
                                        style={item.contentStyle}
                                    >
                                        {item.slots.default}
                                    </span>
                                </div>
                            </td>
                        );
                    })}
                </tr>
            </tbody>
        );
    },
};
